<template>
  <div class="koubierank-box">
    <div class="koubiehead">
        <div class="head"></div>
      <div class="topcontent">
        <img class="bg-koubei" src="https://s.qunarzz.com/h_touch_activity/img/rank/koubei_normal.png"/>
        <p class="rank-detail-title">千万用户亲测为您精选</p>
      </div>
    </div>
    <!-- 选项卡 -->
    <van-tabs v-model="active" background="#1d3366" color="#e7d0a8" title-active-color="#e7d0a8"  class="tabs">
        <a href="#榜单来源" id="rank1" @click="fun"></a>
        <!-- 榜单来源 -->
            <van-tab title="榜单来源" id="榜单来源">
            <div class="source-item ">
                <!-- <img src="https://s.qunarzz.com/h_touch_activity/img/rank/rule_offical.png" alt=""> -->
                <span class="soucertext">榜单来源</span>
           
                <div class="sourcebox">

                    <img src="https://s.qunarzz.com/h_touch_activity/img/rank/rule_offical.png" >
                    <span>源自官方真实购买用户</span>
                </div>
                <div class="sourcebox">

                    <img src="https://s.qunarzz.com/h_touch_activity/img/rank/rule_offical.png" >
                    <span>源自官方真实购买用户</span>
                </div>
                <div class="sourcebox">

                    <img src="https://s.qunarzz.com/h_touch_activity/img/rank/rule_offical.png" >
                    <span>源自官方真实购买用户</span>
                </div>
                <div class="sourcebox">

                    <img src="https://s.qunarzz.com/h_touch_activity/img/rank/rule_offical.png" >
                    <span>源自官方真实购买用户</span>
                </div>
            </div>
        </van-tab>
        <!--榜单生产流程  -->
        <van-tab title="榜单生产流程" class="process-content">
            <div class="process-box processItem">
                <img src="https://s.qunarzz.com/h_touch_activity/img/rank/rule_six.png" alt="">
                <div>
                    <span>六大指标初筛候选酒店</span>
                    <p>依据去哪儿海量数据，综合考虑酒店房型、酒店设施、搜索热度、服务质量、用户反馈和用户复购率六大指标，精选各城市具有代表性的优质酒店。</p>
                </div>
            </div>
            <div class="process-box processItem">
                <div>
                    <span>大众评审&试睡员票选</span>
                    <p>大众评审&试睡员，年龄性别城市均无限制，均由真实用户下单入住后，邀请用户对入住酒店的六个指标维度进行评分和票选。</p>
                </div>
                <img src="https://s.qunarzz.com/h_touch_activity/img/rank/rule_select.png" style="width: 90px; height: 87px; margin-left: 10px;" alt="">
            </div>
            <div class="process-box processItem">
                <img src="https://s.qunarzz.com/h_touch_activity/img/rank/rule_six.png" alt="">
                <div>
                    <span>六大指标初筛候选酒店</span>
                    <p>依据去哪儿海量数据，综合考虑酒店房型、酒店设施、搜索热度、服务质量、用户反馈和用户复购率六大指标，精选各城市具有代表性的优质酒店。</p>
                </div>
            </div>
            <div class="process-box processItem">
                <div>
                    <span>大众评审&试睡员票选</span>
                    <p>大众评审&试睡员，年龄性别城市均无限制，均由真实用户下单入住后，邀请用户对入住酒店的六个指标维度进行评分和票选。</p>
                </div>
                <img src="https://s.qunarzz.com/h_touch_activity/img/rank/rule_select.png" style="width: 90px; height: 87px; margin-left: 10px;" alt="">
            </div>
        </van-tab>
        <!-- 解释与说明 -->
        <van-tab title="解释与说明">
            <div class="rule-box">
                <div class="soure-header">
                    <span>
                        解释与说明
                    </span>
                </div>
                <!-- explain-item -->
                <div class="explain-item">
                    <span>1.真实有效</span>
                    <p>
                        “口碑榜”承诺，点评数据精挑细选，充分关注用户需求。
                    </p>
                </div>
                <div class="explain-item">
                    <span>2.匿名原则</span>
                    <p>
                        测试用于匿名，酒店与测试者之间无利益关系，保证测评效果客观公正。
                    </p>
                </div>
                <div class="explain-item">
                    <span>3.专业权威</span>
                    <p>
                        酒店榜单覆盖了去哪儿网热门酒店，测评过程科学公正，生产榜单具有一定权威性。同时引入NPS质量监督机构对榜单调研统计阶段工作进行审核。
                    </p>
                </div>
            <!-- explain-footer -->
            <div class="explain-footer">
                <span>
                    本榜单最终解释权归去哪儿所有
                </span>
            </div>
            </div>
            
        </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  name: "koubierankpage",
  data() {
    return {
        active: 0,
    };
  },
  components: {},
  methods: {
    fun(){
        const anchor = document.getElementById('rank1');
    anchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  },
};
</script>
<style scoped>
@import url("../../../style/base.css");
.koubierank-box {
  width: 100%;
  height: 100%;
  .koubiehead {
    width: 100%;
    height: 200px;
    background-image: url("https://s.qunarzz.com/h_touch_activity/img/rank/rule_bg.png");
    background-size: 100% 100%;
    overflow: hidden;
    .head{
        height: 60px;
    }
    .topcontent {
    text-align: center;
    .rank-detail-title {
      font-size: 14px;
      color: #e7d0a8;
      margin-top: 20px;
      font-weight: 500;
    }
    .bg-koubei {
      width: 200px;
      height: 50px;
      display: block;
      margin: 0 auto;
      margin-top: 15px;
      margin-bottom: 15px;
    }
  }
  }
  .tabs{
    width: 100%;
    height: auto;
    background: #1d3366;
    .source-item{
        width: 100%;
        height: 100%;
        background: #1d3366;
        text-align: center;
        margin:0 auto;
        color: #e7d0a8;
        font-size: 15px;
           .soucertext{
            display: inline-block;
            margin-top: 30px;
            font-size: 20px;
        }
        .sourcebox{
            width: 190px;
            height: 83px;
            margin: 0 auto;
            display: flex;
            padding-top: 10px;
            justify-content: space-between;
            align-items: center;
            color: #e7d0a8;
            font-size: 15px;
        }
    }
    .source-item img{
            width: 24px;
            height: 24px;
        }
  }
.process-content{
    width: 100%;
    height: auto;
    background: #1d3366;
    .process-box{
    width: 90%;
    /* height: 100px; */
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.process-box img{
    width: 117px;
    height: 145px;
    margin-right:10px ;
}
.process-box span{
    width: 117px;
    height: 145px;
    margin-left:10px;
    font-size: 16px;
    color: #e7d0a8;
}
.process-box p{
    /* width: 117px; */
    /* height: 145px; */
    padding-left: 10px;
    margin-top:20px;
    font-size: 12px;
    line-height: 22px;
    color: #8c7f70;
}
.processItem{
    margin-top:50px;
}
}
.rule-box{
    width: 100%;
    height: 400px;
    /* margin: 0 auto; */
   
    margin-top: 30px;
    .soure-header{
    text-align: center;
    }
}
.soure-header>span{
    font-size: 20px;
    color: #e7d0a8;
}
.explain-item{
    width: 80%;
    height: auto;
    margin-top: 30px;
    margin: 0 auto;
    /* text-align: center; */
}
.explain-item span{
    width: 90%;
    margin: 10px 0px;
    font-size: 14px;
    color: #e7d0a8;

}
.explain-item p{
    width: 90%;
    margin: 10px 0px;
    font-size: 12px;
    color: #8c7f70;

}
.explain-footer{
    width: 100%;
    height: 30px;
    margin-top: 60px;
    text-align: center;
    font-size: 12px;
    color: #8c7f70;
}
}
</style>
